<template>
  <div class="app-container flex-column">
    <div class="g-box" style="height:620px;">
      <div style="width: 960px; height: 100%;">
        <div id="container"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { Graph } from '@antv/x6'
export default {
  name: "Antv",
  data() {
    return {
      graph: null,
      data: {
        nodes: [
          {
            id: "node1",
            x: 1,
            y: 100,
            width: 100,
            height: 60,
            label: "创建方案",
          },
          {
            id: "node2",
            x: 200,
            y: 100,
            width: 100,
            height: 60,
            label: "选择工艺路径",
          },
          {
            id: "node3",
            x: 400,
            y: 100,
            width: 100,
            height: 60,
            label: "设备可用性配置",
          },
          {
            id: "node4",
            x: 400,
            y: 200,
            width: 100,
            height: 60,
            label: "生产需求上传",
          },
          {
            id: "node5",
            x: 400,
            y: 300,
            width: 100,
            height: 60,
            label: "期初数据获取",
          },
          {
            id: "node6",
            x: 600,
            y: 200,
            width: 100,
            height: 60,
            label: "生成计划",
          },
          {
            id: "node7",
            x: 800,
            y: 200,
            width: 100,
            height: 60,
            label: "查看KPI",
          },
          {
            id: "node8",
            x: 800,
            y: 300,
            width: 100,
            height: 60,
            label: "发布为生产计划",
          },
          {
            id: "node9",
            x: 800,
            y: 400,
            width: 100,
            height: 60,
            label: "计划跟踪",
          },
          {
            id: "node10",
            x: 800,
            y: 500,
            width: 100,
            height: 60,
            label: "计划调整",
          }
        ],
        edges: [
          {
            source: "node1",
            target: "node2",
          },
          {
            source: "node2",
            target: "node3",
          },
          {
            source: "node3",
            target: "node6",
            vertices: [
              { x: 650, y: 130 }
            ],
          },
          {
            source: "node4",
            target: "node6",
          },
          {
            source: "node5",
            target: "node6",
            vertices: [
              { x: 650, y: 330 }
            ],
          },
          {
            source: "node6",
            target: "node7",
          },
          {
            source: "node7",
            target: "node8",
          },
          {
            source: "node8",
            target: "node9",
          },
          {
            source: "node9",
            target: "node10",
          },
          {
            source: "node10",
            target: "node9",
            vertices: [
              { x: 700, y: 430 }
            ],
          }
        ]
      }
    }
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.creatGraph()
    },
    creatGraph() {
      this.$nextTick(() => {
        this.graph = new Graph({
          container: document.getElementById('container'),
          autoResize: true,
          connecting: {
            router: 'manhattan',
          },
          interacting: false
        })
        this.graph.fromJSON(this.data)

        this.graph.on('node:click', ({ e, x, y, node, view }) => {
          node.attr('body/fill', '#FFB6C1'); // 修改填充色
          node.attr('body/stroke', '#f60'); // 修改描边色
          node.attr('label/fill', '#fff'); // 修改文字颜色


          let edges = this.graph.getConnectedEdges(view.cell)
          edges[0].attr('line/stroke', '#F00')
          edges[0].zIndex = 2
        })
      })
    }
  }
};
</script>

<style scoped lang="scss"></style>

